<template>
  <div class="app-container permissionList">
    <el-button type="primary" @click="handleAddRole" v-if="btnPower('admin:system:router:add')">新增路由</el-button>
    <el-table :data="tableData" style="margin-top: 20px" row-key="id" stripe
      :tree-props="{ hasChildren: 'hasChildren' }">
      <el-table-column prop="title" label="路由名称" />
      <el-table-column prop="href" label="控制器" />
      <el-table-column>
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="handleEdit(scope)">编辑</el-link>
          <el-link type="primary" :underline="false" @click="handleDelete(scope)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="700px" :title="isEdit ? '编辑路由' : '新增路由'" :visible.sync="dialogVisible"
      :close-on-click-modal="false" append-to-body direction="rtl" @mousedown.native="$dialog.getMousedown($event)"
      @mouseup.native="dialogVisible = $dialog.getMouseup($event)" :show-close="false" :wrapper-closable="false">
      <el-popover placement="left-start" trigger="hover" width="200" content="按ESC键快捷关闭弹窗" class="drawer-close">
        <span slot="reference" @click="dialogVisible = false">
          <i class="el-icon-close icon-common-close"></i>
        </span>
      </el-popover>
      <div class="drawerBody">
        <el-form ref="routeForm" :model="form" :rules="rules" label-width="80px" label-position="top">
          <el-form-item label="父级路由">
            <el-cascader v-model="form.pid" :options="options" :props="pidProps" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="路由名称" prop="title">
            <el-input v-model="form.title" placeholder="路由名称" clearable />
          </el-form-item>
          <el-form-item label="控制器" prop="href">
            <el-input v-model="form.href" placeholder="请输入后端控制器名称" clearable />
          </el-form-item>
          <el-form-item label="前端路径" prop="path">
            <el-input v-model="form.path" placeholder="请输入前端路径" clearable />
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon">
            <el-popover ref="iconListPopover" placement="bottom-start" trigger="click" width="550"
              popper-class="mod-menu__icon-popover">
              <div class="mod-menu__icon-inner">
                <div class="mod-menu__icon-list" style="">
                  <el-button v-for="(item, index) in svgList" :key="index" @click="iconActiveHandle(item)"
                    :class="{ 'is-active': item === form.icon }">
                    <svg-icon :icon-class="item" class-name="disabled" />
                  </el-button>
                </div>
              </div>
            </el-popover>
            <el-input v-model="form.icon" v-popover:iconListPopover placeholder="菜单图标名称" class="icon-list__input"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-radio-group v-model="form.menu_status">
              <el-radio :label="'1'">页面</el-radio>
              <el-radio :label="'0'">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="验证权限">
            <el-radio-group v-model="form.auth_open">
              <el-radio :label="'1'">否</el-radio>
              <el-radio :label="'0'">是</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否隐藏">
            <el-radio-group v-model="form.hidden">
              <el-radio :label="'false'">否</el-radio>
              <el-radio :label="'true'">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="form.sort" :min="1" :max="100" label="描述文字" />
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-box">
        <el-popover placement="left-start" trigger="hover" content="按ESC键快捷关闭弹窗">
          <el-button slot="reference" @click.stop="dialogVisible = false">取消</el-button>
        </el-popover>
        <el-button type="primary" @click.stop="confirmRole">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoutes,
  getRouteTree,
  addRoute,
  delRouter,
  editRoute,
} from "@/api/role";
import { deepClone, getTreeData, btnPower } from "@/utils";
// import Icons from '@/icons'
import svgList from '@/icons/svg-list'
export default {
  data() {
    return {
      svgList,
      options: [],
      form: {
        pid: "",
        title: "",
        href: "",
        path: "",
        menu_status: '1',
        auth_open: '0',
        hidden: 'false',
        sort: "",
        icon: "",
      },
      pidProps: {
        value: 'id',
        label: 'title',
        emitPath: false,
        checkStrictly: true
      },
      rules: {
        title: [
          { required: true, message: "请输入路由名称", trigger: "blur" },
          { max: 10, message: "不超过10个字符" },
        ],
        href: [
          { required: true, message: "请输入控制器名称", trigger: "blur" },
        ],
        path: [{ required: true, message: "请输入前端路径", trigger: "blur" }],
      },
      tableData: [],
      dialogVisible: false,
      isEdit: false,
    };
  },
  created() {
    this.getRoutes();
    this.getRouteTree();
  },
  methods: {
		btnPower(str) {
		  return btnPower(str)
		},
    iconActiveHandle(iconName) {
      this.form.icon = iconName
    },
    getRoutes() {
      getRoutes().then((res) => {
        console.log('父级路由-----------', res)
        this.options = res.status == 1 ? getTreeData(res.data) : [];
      });
    },
    getRouteTree() {
      getRouteTree().then((res) => {
        this.tableData = res.data;
      });
    },
    handleAddRole() {
      this.form = {
        pid: "",
        title: "",
        href: "",
        path: "",
        menu_status: '1',
        auth_open: '0', //
        hidden: 'false',
        sort: "",
        icon: "",
      };
      this.isEdit = false;
      this.dialogVisible = true;
    },
    handleEdit(scope) {
      this.isEdit = true;
      this.dialogVisible = true;
      this.form = deepClone(scope.row);
      this.form.pid = this.form.pid || "";
    },
    handleDelete({ $index, row }) {
      this.$confirm(`确定要删除 ”${row.title}“ 吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          const res = await delRouter({ id: row.id });
          if (res.status === 1) {
            this.getRouteTree();
            this.getRoutes();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    confirmRole() {
      this.$refs.routeForm.validate((valid) => {
        if (valid) {
          if (!this.isEdit) {
            addRoute(this.form).then((res) => {
              if (res.status === 1) {
                this.$message({
                  type: "success",
                  message: "创建成功",
                });
                this.dialogVisible = false;
                this.getRouteTree();
                this.getRoutes();
              }
            });
          } else {
            editRoute(this.form).then((res) => {
              if (res.status === 1) {
                this.$message({
                  type: "success",
                  message: "更新成功",
                });
                this.dialogVisible = false;
                this.getRouteTree();
                this.getRoutes();
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}

.el-link+.el-link {
  margin-left: 16px;
}

.permissionList {
  ::v-deep {

    .el-table .el-table__body td .cell:empty::after,
    .el-table .el-table__body td .cell>span:empty::after,
    .el-table .el-table__body td .cell .approval:empty::after,
    .el-table .el-table__body td .cell div:empty::after,
    .el-table .el-table__body td .cell .line-limit-length:empty::after {
      content: ""
    }

  }
}
</style>